<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四栏Tab</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <!--
        https://www.msn.cn/zh-cn/weather/maps/wind/
    -->
    <div class="lifeIndexCard-DS-EntryPoint1-1">
        <div class="lifeIndexesContainer-DS-EntryPoint1-1">
            <div class="lifeIndexItems-DS-EntryPoint1-1" style="grid-template-rows: repeat(2, 1fr);">

                <a href="#" class="lifeIndexItem-DS-EntryPoint1-1">
                    <div class="lifeIndexItemIcon-DS-EntryPoint1-1"><span>
                            <img src="./img/umbrella.svg">
                        </span>
                    </div>
                    <div class="lifeIndexItemText-DS-EntryPoint1-1">
                        <div class="lifeIndexItemName-DS-EntryPoint1-1 textEllipsis-DS-EntryPoint1-1">带伞指数</div>

                        <div class="lifeIndexItemContent-DS-EntryPoint1-1">
                            <span class="lifeIndexItemLevelCircle-DS-EntryPoint1-1"
                                style="background: rgb(59, 226, 59);"></span>
                            <span class="lifeIndexItemLevel-DS-EntryPoint1-1 textEllipsis-DS-EntryPoint1-1">无需带伞</span>
                        </div>
                    </div>
                </a>

                <a href="#" class="lifeIndexItem-DS-EntryPoint1-1">
                    <div class="lifeIndexItemIcon-DS-EntryPoint1-1"><span>
                            <img src="./img/motion.svg">
                        </span>
                    </div>
                    <div class="lifeIndexItemText-DS-EntryPoint1-1">
                        <div class="lifeIndexItemName-DS-EntryPoint1-1 textEllipsis-DS-EntryPoint1-1">带伞指数</div>

                        <div class="lifeIndexItemContent-DS-EntryPoint1-1">
                            <span class="lifeIndexItemLevelCircle-DS-EntryPoint1-1"
                                style="background: rgb(59, 226, 59);"></span>
                            <span class="lifeIndexItemLevel-DS-EntryPoint1-1 textEllipsis-DS-EntryPoint1-1">无需带伞</span>
                        </div>
                    </div>
                </a>

                <a href="#" class="lifeIndexItem-DS-EntryPoint1-1">
                    <div class="lifeIndexItemIcon-DS-EntryPoint1-1"><span>
                            <img src="./img/clothing.svg">
                        </span>
                    </div>
                    <div class="lifeIndexItemText-DS-EntryPoint1-1">
                        <div class="lifeIndexItemName-DS-EntryPoint1-1 textEllipsis-DS-EntryPoint1-1">带伞指数</div>

                        <div class="lifeIndexItemContent-DS-EntryPoint1-1">
                            <span class="lifeIndexItemLevelCircle-DS-EntryPoint1-1"
                                style="background: rgb(59, 226, 59);"></span>
                            <span class="lifeIndexItemLevel-DS-EntryPoint1-1 textEllipsis-DS-EntryPoint1-1">无需带伞</span>
                        </div>
                    </div>
                </a>

                <a class="lifeIndexItem-DS-EntryPoint1-1 lifeIndexItemMore-DS-EntryPoint1-1" href="#" title="查看更多内容"
                    target="_blank">
                    <span class="lifeIndexItemMoreText-DS-EntryPoint1-1">查看更多内容</span>
                    <span style="height: 16px;">
                        <img src="./img/right.svg" />
                    </span>
                </a>

            </div>
        </div>
    </div>

</body>

</html>